<template>
	<view>
		<view class="search-header">
			<view class="search-box">
				<input type="text" class="search-ipt" placeholder="搜索商品" maxlength="15" v-model="kw" ref="ipt">
				<view class="search-icon">
					<uni-icons type="search" size="16"></uni-icons>
				</view>
				<view class="clear-kw" v-show="kw" @click.stop="kw=''">
					<uni-icons type="closeempty" size="16"></uni-icons>
				</view>
			</view>
			<text class="search-btn" @click="clickSearch">搜索</text>
		</view>
		<view class="search-main">
			<view class="old-search">
				<view class="old-search-title">
					<view class="search-title">历史搜索</view>
					<uni-icons type="trash-filled" size="22" color="#999" @click="cleanHistory"></uni-icons>
				</view>
				<view class="old-search-tags">
					<view style="display: inline-block;padding: 10rpx" v-for="(item,i) in historyList" :key="i">
						<view class="search-tag" @click="clickOldTag(item)">
							{{item}}
							<view class="del-icons" @click.stop="removeHistory(i)">
								<uni-icons type="closeempty" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="search-result" v-show="isResultShow">
				<view class="search-result-header">
					<view class="search-title">搜索结果</view>
					<view class="search-count">共<text
							style="color:#f00;padding:0 10rpx">{{searchResult.length}}</text>件商品</view>
				</view>
				<view class="search-goods-list" v-for="item in searchResult" :key="item._id">
					<view style="padding-bottom: 20rpx;">
						<goods-card :goods="item"></goods-card>
					</view>
				</view>
				<view class="search-empty" v-if="searchResult.length<1">
					<image src="../../static/empty.png" mode="widthFix" class="search-empty-img"></image>
					<view>未找到该商品~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw: '', // 搜索关键字
				historyList: [], // 搜索历史
				searchResult: [], // 搜索结果
				isResultShow: false, // 控制搜索结果显示隐藏
			};
		},
		onLoad() {
			this.historyList = JSON.parse(uni.getStorageSync('KW') || '[]');
		},
		methods: {
			async clickSearch() { // 点击搜索按钮
				let kw = this.kw.replace(/ /g, '');
				if (!kw) {
					this.searchResult = [];
					this.kw = '';
					uni.showToast({
						title: '搜索关键字不能为空！',
						icon: 'none'
					});
					return
				}
				let {
					data
				} = await uni.$http.reqSearch(kw);
				this.searchResult = data;
				this.saveSearchHistory(kw);
				this.isResultShow = true;
			},
			// 点击历史标签进行搜素
			clickOldTag(tag) {
				this.kw = tag;
				this.clickSearch();
			},
			// 保存搜索关键词的方法
			saveSearchHistory(kw) {
				// 保存搜索关键词 去重 最多20条
				let history = [...new Set([kw, ...this.historyList])];
				if (history.length > 10) {
					history.pop();
				}
				this.historyList = history;
				// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
				uni.setStorageSync('KW', JSON.stringify(this.historyList))
			},
			// 清除单个搜索历史
			removeHistory(i) {
				this.historyList.splice(i, 1);
				uni.setStorageSync('KW', JSON.stringify(this.historyList));
			},
			// 清空搜索历史记录
			cleanHistory() {
				// 清空 data 中保存的搜索历史
				this.historyList = []
				// 清空本地存储中记录的搜索历史
				uni.removeStorageSync('KW');
			},
		}
	}
</script>

<style lang="scss">
	.search-header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;

		.search-box {
			flex: 1;
			position: relative;

			.search-ipt {
				height: 70rpx;
				padding: 0 70rpx 0 50rpx;
				border-radius: 35rpx;
				background-color: #f8f8f8;
			}

			.search-icon {
				position: absolute;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.clear-kw {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 21px;
				height: 21px;
				text-align: center;
				border-radius: 50%;
				background-color: #e9e9e9;
			}

		}

		.search-btn {
			padding-left: 30rpx;

			&:active {
				color: coral;
			}
		}
	}

	.search-main {
		padding: 0 20rpx;
	}

	.old-search-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search-title {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		font-weight: 700;
	}

	.search-tag {
		position: relative;
		display: inline-block;
		height: 50rpx;
		padding-left: 20rpx;
		padding-right: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		background-color: #fff;
		border-radius: 30rpx;

		&:active {
			color: #f00;
			background-color: #dedede;
		}

		.del-icons {
			position: absolute;
			right: 0;
			top: -10rpx;
			height: 15px;
			padding: 2px;
			line-height: 15px;
			border-radius: 50%;
			background-color: #e9e9e9;
		}


	}

	.search-result-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search-count {
			color: #999999;
		}
	}

	.search-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0;

		.search-empty-img {
			width: 50%;
			margin: 0 auto;
		}
	}
</style>
